import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex} from '@ant-design/react-native';
class Processimg extends Component {
    static navigationOptions = {
        title: '付款方式',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            type: this.props.processtype,
            parkplanlist: this.props.parkingplanitem,
        };
    }
    render() {
        return (
            <View style={{width: '100%', backgroundColor: 'white', borderRadius: 5, paddingBottom: 10}}>
                <Flex style={{marginLeft: 15.5, marginTop: 14.5, marginBottom: 15}}>
                    <Image style={{width: 4, height: 14}} source={require('~/assets/public/tupic.png')} />
                    <Text
                        style={{
                            fontSize: 16,
                            paddingLeft: 3,
                        }}>
                        免费送车位流程
                    </Text>
                </Flex>
                <Flex style={{width: '100%'}} justify={'center'}>
                    <Text style={this.state.type < 0 ? styles.nobuytype : styles.buytype}>1</Text>
                    {this.state.parkplanlist.PackageState === 1 && <Text style={this.state.type < 1 ? styles.noline : styles.line} />}
                    {this.state.parkplanlist.PackageState === 1 && (
                        <Text style={this.state.type < 1 && this.state.parkplanlist.PackageState === 1 ? styles.nogift : styles.gift}>2</Text>
                    )}
                    {this.state.parkplanlist.CoinState === 1 && <Text style={this.state.type < 2 ? styles.noline : styles.line} />}
                    {this.state.parkplanlist.CoinState === 1 && (
                        <Text style={this.state.type < 2 && this.state.parkplanlist.CoinState === 1 ? styles.nogift : styles.gift}>
                            {this.state.parkplanlist.PackageState === 1 ? 3 : 2}
                        </Text>
                    )}
                    {this.state.parkplanlist.CarState === 1 && <Text style={this.state.type < 3 ? styles.noline : styles.line} />}
                    {this.state.parkplanlist.CarState === 1 && (
                        <Text style={this.state.type < 3 && this.state.parkplanlist.CarState === 1 ? styles.nogift : styles.gift}>
                            {this.state.parkplanlist.PackageState === 1 && this.state.parkplanlist.CoinState === 1
                                ? 4
                                : this.state.parkplanlist.PackageState === 1 || this.state.parkplanlist.CoinState === 1
                                ? 3
                                : 2}
                        </Text>
                    )}
                    <Text style={this.state.type < 4 ? styles.noline : styles.line} />
                    <Text style={this.state.type < 4 ? styles.nogift : styles.gift}>
                        {this.state.parkplanlist.PackageState === 1 &&
                        this.state.parkplanlist.CoinState === 1 &&
                        this.state.parkplanlist.CarState === 1
                            ? 5
                            : (this.state.parkplanlist.PackageState === 1 && this.state.parkplanlist.CoinState === 1) ||
                              (this.state.parkplanlist.CoinState === 1 && this.state.parkplanlist.CarState === 1) ||
                              (this.state.parkplanlist.CarState === 1 && this.state.parkplanlist.PackageState === 1)
                            ? 4
                            : this.state.parkplanlist.PackageState === 1 ||
                              this.state.parkplanlist.CoinState === 1 ||
                              this.state.parkplanlist.CarState === 1
                            ? 3
                            : 2}
                    </Text>
                </Flex>
                <Flex wrap="wrap" justify={'center'} style={{marginTop: 5}}>
                    <View style={{width: '20%'}}>
                        <Flex style={{width: '100%'}} justify={'center'}>
                            <Text style={styles.texts}>付款方式</Text>
                        </Flex>
                    </View>
                    {this.state.parkplanlist.PackageState === 1 && (
                        <Flex style={{width: '20%'}}>
                            <Flex style={{width: '100%'}} justify={'center'}>
                                <Text style={styles.texts}>拿好礼</Text>
                            </Flex>
                        </Flex>
                    )}
                    {this.state.parkplanlist.CoinState === 1 && (
                        <Flex style={{width: '20%'}}>
                            <Flex style={{width: '100%'}} justify={'center'}>
                                <Text style={styles.texts}>返现金</Text>
                            </Flex>
                        </Flex>
                    )}
                    {this.state.parkplanlist.CarState === 1 && (
                        <Flex style={{width: '20%'}}>
                            <Flex style={{width: '100%'}} justify={'center'}>
                                <Text style={styles.texts}>送汽车</Text>
                            </Flex>
                        </Flex>
                    )}
                    <Flex style={{width: '20%'}}>
                        <Flex style={{width: '100%'}} justify={'center'}>
                            <Text style={styles.texts}>得车位</Text>
                        </Flex>
                    </Flex>
                </Flex>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    buytype: {width: 20, height: 20, lineHeight: 20, backgroundColor: '#ec4f46', borderRadius: 10, overflow: 'hidden', textAlign: 'center', color: 'white', fontSize: 15},
    nobuytype: {width: 20, height: 20, lineHeight: 20, backgroundColor: '#d3d3d3', borderRadius: 10, overflow: 'hidden', textAlign: 'center', color: 'white', fontSize: 15},
    gift: {width: 20, height: 20, lineHeight: 20, backgroundColor: '#ec4f46', borderRadius: 10, overflow: 'hidden', textAlign: 'center', color: 'white', fontSize: 15},
    nogift: {width: 20, height: 20, lineHeight: 20, backgroundColor: '#d3d3d3', borderRadius: 10, overflow: 'hidden', textAlign: 'center', color: 'white', fontSize: 15},
    line: {width: '15%', height: 2, backgroundColor: '#ec4f46'},
    noline: {width: '15%', height: 2, backgroundColor: '#d3d3d3'},
    texts: {fontSize: 12, marginTop: 5},
});
export default Processimg;
